<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			li{list-style: none;}
			#wrap{width: 326px;height: 580px;position: relative;margin: 100px auto;}
			#wrap h4,#wrap p{position: absolute;left: 0;width: 100%;background: rgba(0,0,0,0.3);height: 35px;line-height: 35px;
			text-align: center;color: #fff;
			}
			
			#wrap h4{
				top: 0px;
			}
			#wrap p {
				bottom: 0px;
			}
			#btn{position: absolute;top:0px; right: -30px;width: 30px;text-align: center;}
			#btn button{height: 30px;width: 30px;text-align: center;line-height: 30px;color:#fff;background: #000000;
			margin-bottom: 8px;border: none;outline: none;
			}
			#btn button.on{background: orange;}
		</style>
	</head>
	<body>
		<div id="wrap">
			<h4></h4>
			<ul>
				<li><img id="img" src="images/g1.jpg"></li>
			</ul>
			<p></p>
			<div id="btn">
				
			</div>
		</div>
		<script>
			var imgArry = ["images/g1.jpg","images/g2.jpg","images/g3.jpg","images/g4.jpg"];
			var textArry = ["酷小狗","可爱的小猫","活跃的小猫","鹦鹉"];
			var num = 0;
			var h4 = wrap.getElementsByTagName('h4')[0];
			var p = wrap.getElementsByTagName('p')[0];
			
			h4.innerHTML= textArry[num];
			p.innerHTML = "1/"+imgArry.length;
			
			for (var i = 0; i < imgArry.length; i++) {
				
				var buttom = document.createElement("button");
				buttom.index = i//设置索引值
				
				i==0?buttom.className = 'on':'';
				buttom.innerHTML = i+1;
				buttom.onclick = function(){
					var buBtn = btn.getElementsByTagName('button');
					for(var j = 0; j<buBtn.length;j++){
						buBtn[j].className = '';
					}
					img.src= imgArry[this.index];
					h4.innerHTML= textArry[this.index];
					p.innerHTML = (this.index+1)+"/"+imgArry.length;
					
					
					this.className="on";
				}
				btn.appendChild(buttom);
			}
		</script>
	</body>
</html>
